<template>
	<view class="content">
		<image src="../../static/image/us_bg.png" class="us-bg"></image>
		<u-navbar title="我的" :background="background" title-size="34" :border-bottom="false" :immersive="true"
			:is-back="false" title-color="#000" title-width="300"></u-navbar>

		<view class="wrapper" :style="{paddingTop: statusBar + 45 + 'px'}">
			<view class="info" @click="toLogin">
				<image :src="info.headimgurl || '../../static/icon/avatar.png'" class="avatar"></image>
				<view class="u-flex-1">
					<view class="name">{{info.user_name || '未登录'}}</view>
					<!-- user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划 -->
					<view class="u-flex">
						<view class="job yyjl" v-if="info.user_type == 1">运营经理</view>
						<view class="job yyzj" v-if="info.user_type == 2">运营总监</view>
						<view class="job xmzc" v-if="info.user_type == 3">项目驻场</view>
						<view class="job xmzj" v-if="info.user_type == 4">项目总监</view>
						<view class="u-flex" v-if="info.user_type == 5">
							<view class="job jjr">经纪人</view>
							<!-- status 0未认证 1待审核 2通过 3驳回 -->
							<image src="../../static/icon/us_10.png" class="us-10"
								v-if="info.status == 0 || info.status == 1"></image>
							<image src="../../static/icon/us_11.png" class="us-10" v-if="info.status == 2"></image>
						</view>
						<view class="job mddz" v-if="info.user_type == 6">门店店长</view>
						<!-- <view class="job jjr" v-if="info.user_type == 8 || info.user_type == 9">
                            {{info.position}}
                        </view> -->
						<view class="job bbzy" v-if="info.user_type == 8">报备专员</view>
						<view class="job chzy" v-if="info.user_type == 9">策划</view>
						<view></view>
					</view>
				</view>
				<view class="admin" v-if="info.user_type == 7" @click="$gTo('/admin/pages/index/index')">管理员</view>
			</view>
			<view class="num-box" v-if="info.user_type && info.user_type != 7">
				<view>
					<view class="num">{{info.deal_num}}</view>
					<view>成交客户数量</view>
				</view>
				<view>
					<view class="num">{{info.report_num}}</view>
					<view>报备客户数量</view>
				</view>
				<view>
					<view class="num">{{info.come_num}}</view>
					<view>已到访客户</view>
				</view>
			</view>
			<!-- 佣金记录 -->
			<image src="../../static/image/us_img_01.png" class="us-img-01"
				@click="toPage('/mine/pages/record/commission')"></image>

			<!-- user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划 -->
			<!-- 项目总监、项目驻场、运营经理、运营总监 -->
			<view class="box"
				v-if="info.user_type == 1 || info.user_type == 2 || info.user_type == 3 || info.user_type == 4">
				<view @click="toPage('/mine/pages/hit-card/hit-card')">
					<view>
						<view>考勤打卡</view>
						<view class="box-sub">点击立即打卡</view>
					</view>
					<image src="../../static/image/us_img_08.png" class="us-img-08"></image>
				</view>
				<view @click="toPage('/mine/pages/record/follow')">
					<view>
						<view>回访记录</view>
						<view class="box-sub">查看回访详情</view>
					</view>
					<image src="../../static/image/us_img_09.png" class="us-img-09"></image>
				</view>
			</view>
			<!-- 门店店长（考勤打卡）、经纪人（签到） -->
			<view class="box" v-if="info.user_type == 5 || info.user_type == 6 || info.user_type == 9">
				<view @click="toPage('/mine/pages/hit-card/hit-card')" v-if="info.user_type == 6 || info.user_type == 9">
					<view>
						<view>考勤打卡</view>
						<view class="box-sub">点击立即打卡</view>
					</view>
					<image src="../../static/image/us_img_08.png" class="us-img-08"></image>
				</view>
				<view @click="toPage('/mine/pages/sign/sign')" v-if="info.user_type == 5">
					<view>
						<view>签到</view>
						<view class="box-sub">点击立即签到</view>
					</view>
					<image src="../../static/image/us_img_10.png" class="us-img-10"></image>
				</view>
				<view @click="toPage('/mine/pages/other/feedback')">
					<view>
						<view>投诉建议</view>
						<view class="box-sub">查看政策详情</view>
					</view>
					<image src="../../static/image/us_img_11.png" class="us-img-11"></image>
				</view>
			</view>
			<!-- 报备专员 -->
			<view class="box" v-if="info.user_type == 8">
				<view @click="toPage('/mine/pages/hit-card/hit-card')">
					<view>
						<view>考勤打卡</view>
						<view class="box-sub">点击立即打卡</view>
					</view>
					<image src="../../static/image/us_img_08.png" class="us-img-08"></image>
				</view>
				<!-- <view @click="toPage('/mine/pages/sign/sign')">
					<view>
						<view>签到</view>
						<view class="box-sub">点击立即签到</view>
					</view>
					<image src="../../static/image/us_img_10.png" class="us-img-10"></image>
				</view> -->
				<view @click="toPage('/staff/pages/shopowner/project-report')">
					<view>
						<view>审核管理</view>
						<view class="box-sub">查看详情</view>
					</view>
					<image src="../../static/image/us_img_11.png" class="us-img-11"></image>
				</view>
			</view>
			<!-- 管理员 -->
			<view class="box" v-if="info.user_type == 7">
				<view @click="toPage('/mine/pages/record/follow')">
					<view>
						<view>回访记录</view>
						<view class="box-sub">查看回访详情</view>
					</view>
					<image src="../../static/image/us_img_09.png" class="us-img-09"></image>
				</view>
				<view @click="toPage('/mine/pages/other/feedback')">
					<view>
						<view>投诉建议</view>
						<view class="box-sub">查看政策详情</view>
					</view>
					<image src="../../static/image/us_img_11.png" class="us-img-11"></image>
				</view>
			</view>

			<!-- 运营经理 -->
			<image src="../../static/image/us_img_04.png" class="us-img-02" v-if="info.user_type == 1"
				@click="toPage('/staff/pages/opex-manager/opex-manager')"></image>
			<!-- 运营总监 -->
			<image src="../../static/image/us_img_05.png" class="us-img-02" v-if="info.user_type == 2"
				@click="toPage('/staff/pages/opex-commissioner/opex-commissioner')"></image>
			<!-- 项目驻场 -->
			<image src="../../static/image/us_img_03.png" class="us-img-02" v-if="info.user_type == 3"
				@click="toPage('/staff/pages/resident/resident')"></image>
			<!-- 项目总监 -->
			<image src="../../static/image/us_img_02.png" class="us-img-02" v-if="info.user_type == 4"
				@click="toPage('/staff/pages/commissioner/commissioner')"></image>
			<!-- 经纪人-探盘排行榜 -->
			<image src="../../static/image/us_img_07.png" class="us-img-02" v-if="info.user_type == 5"
				@click="toPage('/mine/pages/record/rank')"></image>
			<!-- 门店店长 -->
			<image src="../../static/image/us_img_06.png" class="us-img-02" v-if="info.user_type == 6"
				@click="toPage('/staff/pages/shopowner/shopowner')"></image>

			<view class="nav">
				<view @click="toPage('/mine/pages/other/info')">
					<image src="../../static/icon/us_01.png" class="us-01"></image>
					<view>个人信息</view>
				</view>
				<view @click="toPage('/mine/pages/other/user-privacy')">
					<image src="../../static/icon/us_02.png" class="us-01"></image>
					<view>隐私政策</view>
				</view>
				<view @click="KFshow = true">
					<image src="../../static/icon/us_03.png" class="us-01"></image>
					<view>联系我们</view>
				</view>
				<view @click="toPage('/mine/pages/other/rule')">
					<image src="../../static/icon/us_04.png" class="us-01"></image>
					<view>平台规则</view>
				</view>
				<view @click="toPage('/mine/pages/other/about')">
					<image src="../../static/icon/us_05.png" class="us-01"></image>
					<view>平台介绍</view>
				</view>
			</view>

			<view class="down">
				<view @click="toOfficial">
					<view class="u-flex">
						<u-icon name="weixin-circle-fill" size="36" class="u-m-r-10"></u-icon>
						<!-- <image src="../../static/icon/us_06.png" class="us-06"></image> -->
						<view>公众号授权</view>
					</view>
					<image src="../../static/icon/arrow_r_02.png" class="arrow-r-02"></image>
				</view>
				
				<view @click="toPage('/admin/pages/notice/notice')" v-if="info.user_type == 9">
					<view class="u-flex">
						<image src="../../static/icon/us_13.png" class="us-06"></image>
						<view>公告管理</view>
					</view>
					<image src="../../static/icon/arrow_r_02.png" class="arrow-r-02"></image>
				</view>
				<view @click="toPage('/mine/pages/other/feedback')"
					v-if="info.user_type == 1 || info.user_type == 2 || info.user_type == 3 || info.user_type == 4 || info.user_type == 6 || info.user_type == 8 || info.user_type == 9">
					<view class="u-flex">
						<image src="../../static/icon/us_06.png" class="us-06"></image>
						<view>投诉建议</view>
					</view>
					<image src="../../static/icon/arrow_r_02.png" class="arrow-r-02"></image>
				</view>
				<view @click="logout">
					<view class="u-flex">
						<image src="../../static/icon/us_07.png" class="us-06"></image>
						<view>退出账号</view>
					</view>
					<image src="../../static/icon/arrow_r_02.png" class="arrow-r-02"></image>
				</view>
				<view @click="logoff">
					<view class="u-flex">
						<image src="../../static/icon/us_08.png" class="us-06"></image>
						<view>注销账号</view>
					</view>
					<image src="../../static/icon/arrow_r_02.png" class="arrow-r-02"></image>
				</view>
				<view @click="toPage('/mine/pages/other/edit-password')">
					<view class="u-flex">
						<image src="../../static/icon/us_09.png" class="us-06"></image>
						<view>修改密码</view>
					</view>
					<image src="../../static/icon/arrow_r_02.png" class="arrow-r-02"></image>
				</view>
			</view>
		</view>

		<!-- 平台客服弹窗 -->
		<u-mask :show="KFshow" mode="center" border-radius="14">
			<view class="popup">
				<view class="win-box2">
					<view class="pop-up">
						<view>平台客服</view>
						<image src="/static/image/img_09.png" class="tupian"></image>
					</view>
					<view class="pop-call">
						<view>
							<view class="u-font-24 u-padding-bottom-10">咨询热线</view>
							<view class="u-font-34 text-bold">{{ service.contact_us || '暂无客服电话' }}</view>
						</view>
						<image src="/static/image/img_10.png" v-if="service.contact_us"
							@click="$call(service.contact_us)"></image>
					</view>
					<image src="/static/icon/wx.png" class="pop-del" @click="KFshow = false"></image>
				</view>
			</view>
		</u-mask>
		<!-- 底部导航 -->
		<u-tabbar v-model="current" :list="tab_list" active-color="#29b0ed" :border-top="false" height="120"
			@change="tabbarChange"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				KFshow: false,
				statusBar: 0,
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
				current: 0, //底部导航索引
				tab_list: [{
						iconPath: "/static/icon/tab_01.png",
						selectedIconPath: "/static/icon/tab_01.png",
						text: '',
						pagePath: "/pages/tabbar/index",
						customIcon: false
					}, {
						iconPath: "/static/icon/tab_03.png",
						selectedIconPath: "/static/icon/tab_02.png",
						text: '客户',
						customIcon: false,
						pagePath: "/pages/tabbar/kehu"
					}, {
						iconPath: "/static/icon/tab_05.png",
						selectedIconPath: "/static/icon/tab_04.png",
						text: '消息',
						customIcon: false,
						pagePath: "/pages/tabbar/news"
					}, {
						iconPath: "/static/icon/tab_07.png",
						selectedIconPath: "/static/icon/tab_06.png",
						text: '微聊',
						customIcon: false,
						pagePath: "/pages/tabbar/wechat"
					}, {
						iconPath: "/static/icon/tab_09.png",
						selectedIconPath: "/static/icon/tab_08.png",
						text: '我的',
						customIcon: false,
						pagePath: "/pages/tabbar/mine"
				}],
				info: {},
				service: {},
			};
		},
		onLoad() {
			let _this = this;
			//状态栏高度
			uni.getSystemInfo({
				success: function(res) {
					_this.statusBar = res.statusBarHeight;
				}
			});

		},
		onShow() {
			if (this.$getSync('userToken')) {
				this.getInfo()
			}
			this.getService()
		},
		methods: {
			// 公众号授权
			toOfficial() {
				if (!this.$getSync('userToken')) {
					this.$gTo('/pages/login/login')
				} else {
					// this.$gTo('/mine/pages/other/web')
					uni.showModal({
						title: '温馨提示',
						content: '请到微信公众号（新房通助手）做登录授权，接收公众号消息提醒',
						showCancel: false,
						confirmText: '知道了',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			
			toLogin() {
				if (!this.$getSync('userToken')) {
					this.$gTo('/pages/login/login')
				}
			},
			// 跳页 
			toPage(url) {
				if (!this.$getSync('userToken')) {
					this.$gTo('/pages/login/login')
				} else {
					this.$gTo(url)
				}
			},
			// 获取个人信息
			getInfo() {
				this.$ajax('person_detail', {
					user_token: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.success == 1000) {
						this.info = ret.detail
						// 0未认证 1待审核 2通过 3驳回
						if (ret.detail && ret.detail.status == 0) {
							uni.showModal({
								title: '温馨提示',
								content: '当前账号未认证，立即认证？',
								success: (res) => {
									if (res.confirm) {
										this.$gTo('/pages/login/real-name')
									} else if (res.cancel) {

									}
								}
							});
						} else if (ret.detail && ret.detail.status == 3) {
							uni.showModal({
								title: '温馨提示',
								content: '当前账号审核失败，立即查看？',
								success: (res) => {
									if (res.confirm) {
										this.$gTo('/pages/login/fail?content=' + ret.detail.reason)
									} else if (res.cancel) {

									}
								}
							});
						}
					} else {
						this.info = {}
						this.$toast(ret.msg);
					}
				});
			},
			// 退出账号
			logout() {
				if (!this.$getSync('userToken')) {
					this.$gTo('/pages/login/login')
				} else {
					uni.showModal({
						title: '退出账号',
						content: '是否确认退出当前账号？',
						success: (res) => {
							if (res.confirm) {
								this.$removeSync('userToken')
								this.$removeSync('userInfo')
								this.$removeSync('uid')
								this.$removeSync('device_token')
								this.info = {}
								
								const jyJPush = uni.requireNativePlugin('JY-JPush');
								jyJPush.deleteJYJPushAlias({
									//  可以不用传值进去，但是需要配置这项数据
								}, result => {
									// uni.showToast({
									// 	icon: 'none',
									// 	title: JSON.stringify(result)
									// })
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			// 注销账号
			logoff() {
				if (!this.$getSync('userToken')) {
					this.$gTo('/pages/login/login')
				} else {
					uni.showModal({
						title: '注销账号',
						content: '注销将无法找回，是否注销当前账号？',
						success: (res) => {
							if (res.confirm) {
								this.$ajax('cancel_account', {
									user_token: this.$getSync('userToken'),
								}).then(ret => {
									if (ret.success == 1000) {
										this.$removeSync('userToken')
										this.$removeSync('userInfo')
										this.$removeSync('uid')
										this.$removeSync('device_token')
										this.info = {}
										this.$toast('注销成功');
										
										const jyJPush = uni.requireNativePlugin('JY-JPush');
										jyJPush.deleteJYJPushAlias({
											//  可以不用传值进去，但是需要配置这项数据
										}, result => {
											// uni.showToast({
											// 	icon: 'none',
											// 	title: JSON.stringify(result)
											// })
										});
									} else {
										this.$toast(ret.msg);
									}
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},

			getService() {
				this.$ajax('contact_us', {

				}).then(ret => {
					if (ret.success == 1000) {
						this.service = ret.detail
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			//切换底部导航
			tabbarChange(e) {
				this.current = e;
			},

			onPageScroll: function(e) {
				//nvue暂不支持滚动监听，可用bindingx代替
				// console.log("滚动距离为：" + e.scrollTop);
				let a = e.scrollTop * 0.05;
				if (a > 1) {
					a = 1;
				}
				if (e.scrollTop == 0) {
					this.background.backgroundColor = 'rgba(255,255,255,0)';
				} else {
					this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
				}
			},
		}
	};
</script>

<style>
	.u-tabbar__content__item .u-icon__img {
		width: 50rpx !important;
		height: 50rpx !important;
	}

	.u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img {
		width: 100rpx !important;
		height: 100rpx !important;
		margin-top: -20rpx;
	}
</style>

<style lang="scss">
	// 客服弹窗
	.popup {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.win-box2 {
		width: 77vw;
		background-color: #ffffff;
		border-radius: 20upx;
		position: relative;
		background: #fff;
		border-radius: 10rpx;
		padding-bottom: 10rpx;
	}

	.pop-up {
		width: 77vw;
		height: 166upx;
		background-image: linear-gradient(to right, #00a1e9, #00a1e9);
		color: #fff;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding-left: 55upx;
		padding-right: 24upx;
		position: relative;
	}

	.pop-up>view {
		font-size: 40upx;
		color: #ffffff;
	}

	.pop-up>image {
		font-size: 40upx;
		color: #ffffff;
		width: 290upx;
		height: 207upx;
		position: absolute;
		bottom: 0;
		right: 24upx;
	}

	.pop-call {
		width: 66vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50upx 0 30upx 0;
		margin: 0 auto;

		image {
			width: 155rpx;
			height: 56rpx;
		}
	}

	.pop-del {
		width: 7vw;
		height: 7vw;
		position: absolute;
		left: 35vw;
		bottom: -100upx;
	}

	page {
		background-color: #f5f5f5;
	}

	.us-bg {
		width: 750rpx;
		height: 450rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.wrapper {
		padding: 20rpx;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
	}

	.admin {
		background-color: #00a1e9;
		color: #fff;
		padding: 10rpx 15rpx;
		border-radius: 15rpx;
		margin-left: 10rpx;
	}

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
		margin-right: 15rpx;
	}

	.name {
		font-size: 36rpx;
		font-weight: bold;
		padding-bottom: 10rpx;
	}

	.job {
		font-size: 22rpx;
		line-height: 1;
		color: #fff;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.xmzj {
		background: linear-gradient(to right, #fe6e47, #fe824e);
	}

	.xmzc {
		background: linear-gradient(to right, #06c3bc, #0bd2bc);
	}

	.yyjl {
		background: linear-gradient(to right, #2999ff, #3babfd);
	}

	.yyzj {
		color: #f3ce94;
		background: linear-gradient(to right, #1e1f1e, #333434);
	}

	.mddz {
		background: linear-gradient(to right, #5e74ef, #848af4);
	}

	.jjr {
		background: linear-gradient(to right, #f0696d, #f3838f);
	}

	.bbzy {
		background: linear-gradient(to right, #f0696d, #f3838f);
	}

	.chzy {
		background: linear-gradient(to right, #4c63e7, #7285f1);
	}

	.us-10 {
		width: 36rpx;
		height: 36rpx;
		margin-left: 10rpx;
	}

	.num-box {
		padding-bottom: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.num-box>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.num {
		font-size: 40rpx;
		color: #f62a2a;
		padding-bottom: 5rpx;
	}

	.us-img-01 {
		width: 710rpx;
		height: 103rpx;
		margin-bottom: 20rpx;
	}

	.box {
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box>view {
		width: calc(700rpx / 2);
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		padding: 0 25rpx;
		height: 150rpx;
	}

	.box-sub {
		font-size: 24rpx;
		font-weight: normal;
		color: #7d7d7d;
		padding-top: 5rpx;
	}

	.us-img-08 {
		width: 81rpx;
		height: 67rpx;
	}

	.us-img-09 {
		width: 125rpx;
		height: 75rpx;
	}

	.us-img-10 {
		width: 98rpx;
		height: 100rpx;
	}

	.us-img-11 {
		width: 99rpx;
		height: 83rpx;
	}

	.us-img-02 {
		width: 710rpx;
		height: 156rpx;
		margin-bottom: 20rpx;
	}

	.nav {
		padding: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nav>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.us-01 {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 8rpx;
	}

	.down {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 25rpx;
	}

	.down>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #e6e6e6;
		padding: 35rpx 0;
		font-size: 26rpx;
	}

	.down>view:last-child {
		border-bottom: none;
	}

	.us-06 {
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}

	.arrow-r-02 {
		width: 16rpx;
		height: 27rpx;
	}
</style>